<script lang="ts" setup>
import { defineProps } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()

const { cartNum, cartPrice } = defineProps({
    // cartList:Array<any>
        cartNum:Number,
        cartPrice:Number
})

function onClickIcon(){
    router.push('/order')
 }
</script>

<template>
   <van-action-bar>
  <van-action-bar-icon icon="cart-o" :badge="cartNum" @click="onClickIcon" />
   <h5 style="color: white;">{{cartPrice+4}}元</h5> &#x3000;
  <span>| 另需配送费￥4 </span>  &#x3000; &#x3000;
  <span>20元起送</span>
</van-action-bar>
</template>

<style lang="scss" scoped>
.van-action-bar{
    margin: 0 40px;
    bottom: 10px;
    background-color: gray;
    width: 80%;
    height: 40px;
    position: fixed;
    border-top-left-radius: 30px !important; /* 左上角圆角 */
    border-bottom-left-radius: 30px !important; /* 左下角圆角 */
    border-top-right-radius: 30px; /* 左上角圆角 */
    border-bottom-right-radius: 30px; /* 左下角圆角 */
}
.van-action-bar-icon{
    background-color: gray;
    border-top-left-radius: 30px !important; /* 左上角圆角 */
    border-bottom-left-radius: 30px !important; /* 左下角圆角 */
    // font-size: 50px;
}
</style>